<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="../js/jquery-3.1.1.js"></script>
		<!--<![endif]-->
		<script type="text/javascript">
			$(function() {
				$("#btn1").click(function() {
					alert("Text: " + $("#test1").text());
				});
				$("#btn2").click(function() {
					alert("HTML: " + $("#test1").html());
				});
				$("#btn3").click(function() {
					alert("值为: " + $("#test2").val());
				});
				$("#btn4").click(function() {
					alert("href为: " + $("#test3").attr("href"));
				});

				$("#btn11").click(function() {
					$("#test1").text("Hello world!");
				});
				$("#btn12").click(function() {
					$("#test1").html("<b>Hello world!</b>");
				});
				$("#btn13").click(function() {
					$("#test2").val("RUNOOB");
				});

				$("#btn14").click(function() {
					$("#test3").attr("href", "http://www.runoob.com/jquery");
				});
				$("#btn5").click(function() {
					$("div").data("greeting", "Hello World");
				});
				$("#btn15").click(function() {
					alert($("div").data("greeting"));
				});
			})

			function funDeferred() {
				var d1 = $.Deferred();
				var d2 = $.Deferred();
				$.when(d1, d2).done(function(v1, v2) {
					alert(v1); // "Fish"
					alert(v2); // "Pizza"
				});
				d1.resolve("Fish");
				d2.resolve("Pizza");
			}
		</script>
		<style type="text/css">
			div {
				border: 1px solid black;
				margin-top: 8px;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<h2>dom的值</h2>
			<p id="test1">这是段落中的 <b>粗体</b> 文本。</p>
			<button id="btn1">显示文本</button>
			<button id="btn2">显示 HTML</button>
			<button id="btn11">设置文本</button>
			<button id="btn12">设置 HTML</button>
		</div>
		<div id="div2">
			<h2>input的值</h2>
			<p>名称: <input type="text" id="test2" value="教程"></p>
			<button id="btn3"> 显示值</button>
			<button id="btn13"> 设置值</button>
		</div>
		<div id="div3">
			<h2>属性的值</h2>
			<p>
				<a href="http://www.zd.com" id="test3">属性的值</a>
			</p>
			<button id="btn4">显示 href 属性的值</button>
			<button id="btn14">设置 href 属性的值</button>
		</div>
		<div id="div4">
			<h2>添加的值</h2>
			<p>
				<a href="http://www.zd.com" id="test3">属性的值</a>
			</p>
			<button id="btn4">显示 href 属性的值</button>
			<button id="btn14">设置 href 属性的值</button>
		</div>
		<div id="div5">
			<h2>添加的data</h2>

			<button id="btn5">设置属性data的值</button>
			<button id="btn15">显示data的值</button>
		</div>
		<div id="div6">
			<h2>添加延迟对象值</h2>

			<button id="btn6" onclick="funDeferred()">延迟对象值</button>
		</div>
	</body>

</html>